<template>
    <div class="wrap">
        <el-card style="width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>工单列表</span>
                </div>
            </template>
            <dl class="filter">
                <dt>客户名称：</dt>
                <dd><el-input v-model="params.keywords" style="width: 180px" placeholder="请输入用户姓名" /></dd>
                <dt>工单类型：</dt>
                <dd><el-select v-model="params.pid" placeholder="请选择" style="width: 200px">
                        <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select></dd>
                <dt>工单状态：</dt>
                <dd><el-select v-model="params.status" placeholder="请选择" style="width: 200px">
                        <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select></dd>
                <dt>时间选择：</dt>
                <dd><el-date-picker v-model="during" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="getDate" /></dd>
                <dd><el-button type="primary" style="margin-left: 20px;" @click="handleSearch">查询</el-button>
                    <el-button @click="handleClear">重置</el-button>
                </dd>
            </dl>
            <el-table :data="list" style="width: 100%; height: calc(100vh - 353px);" border>
                <el-table-column prop="title" label="工单名称" align="center" />
                <el-table-column prop="cate_name" label="工单类型" width="120" align="center" />
                <el-table-column prop="creator_name" label="创建人" width="120" align="center" />
                <el-table-column label="群聊名称" width="120" align="center">
                    <template #default="{ row }">
                        <strong style="color: #006EFF;">{{ row.group_name }}</strong>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="90" align="center">
                    <template #default="{ row }">
                        <el-tag type="primary" v-if="row.status == 1">初审中</el-tag>
                        <el-tag type="success" v-if="row.status == 2">已完结</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="text_legal_name" label="处理人" width="120" align="center" />
                <el-table-column prop="create_time" label="工单提交时间" width="180" align="center" />
                <el-table-column prop="plan_time" label="预计完成时间" width="180" align="center" />
                <el-table-column prop="remark" label="特殊要求及备注" align="center" />
                <el-table-column label="操作" width="190" align="center" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="openDetail(row)">查看</el-button>
                        <el-button type="success" size="small" @click="supplement(row)"
                            v-if="row.status == 2">补充</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination v-model:current-page="params.page" layout="total, prev, pager, next" :total="total"
                    :page-size="10" @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <WorkOrderDetail :visible="isVisible" :woId="currnetId" @closeDialog="closeDialog" />
        <el-dialog v-model="dialogVisible" title="上传补充材料" width="400">
            <div>
                <el-upload class="upload" drag :action="uploadUrl" :file-list="fileList" multiple
                    :on-success="handleFileSuccess" :on-remove="handleRemoveFile">
                    <el-icon class="el-icon--upload" size="40"><upload-filled /></el-icon>
                    <div style="font-size: 12px; line-height: 20px; color: #666;">
                        点击或拖拽文件上传</div>
                    <div style="font-size: 12px; line-height: 20px; color: #666;">文件不超过20M</div>
                </el-upload>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleAdd">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, watchEffect, watch, onMounted } from '../TUIKit/adapter-vue';
import { GetWorkOrderList, getWorkOrderCate, AddSupplement, baseURL } from '@/api';
import WorkOrderDetail from '../TUIKit/components/common/WorkOrder/index'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
const props = defineProps({
    type: {
        type: String,
        default: '',
    }
});
const params = ref<any>({
    group_id: '',
    keywords: '',
    status: -1,
    pid: 0,
    cate_id: '',
    start_time: '',
    end_time: '',
    page: 1
});
const list = ref([]);
const total = ref(0);
const cateList = ref([{
    id: 0,
    name: '全部'
}]);
const statusList = ref([{
    id: -1,
    name: '全部'
}, {
    id: 1,
    name: '初审中'
}, {
    id: 2,
    name: '已完结'
}]);
const during = ref([]);
const isVisible = ref(false);
const currnetId = ref('')
const currentNavBar = ref('')
const dialogVisible = ref(false)
const supplementId= ref('')
const uploadUrl = baseURL + '/admin/ajax/upload';
const file = ref('')
const fileList = ref([])

onMounted(() => {
    getWorkOrderCate({
        pid: 0
    }).then(res => {
        res.data.forEach((item: any) => {
            cateList.value.push(item)
        })
    })
})

watchEffect(() => {
    currentNavBar.value = props.type;
})

watch(currentNavBar, () => {
    if (currentNavBar.value == 'workOrder') {
        getList();
    }
})

function getDate() {
    params.value.start_time = during.value[0]
    params.value.end_time = during.value[1]
}

function getList() {
    GetWorkOrderList(params.value).then(res => {
        list.value = res.data
        total.value = res.count
    })
}

function handleCurrentChange(val: number) {
    params.value.page = val
    getList()
}

function handleSearch(){
    params.value.page = 1
    list.value = []
    getList()
}

function openDetail(row: any) {
    isVisible.value = true
    currnetId.value = row.id.toString()
}

function closeDialog() {
    isVisible.value = false
    currnetId.value = ''
}

function handleClear() {
    params.value.keywords = ''
    params.value.status = -1
    params.value.pid = ''
    params.value.cate_id = ''
    params.value.start_time = ''
    params.value.end_time = ''
    params.value.page = 1
    during.value = []
    getList()
}

function supplement(row: any) {
    supplementId.value = row.id
    dialogVisible.value = true
    file.value = ''
    fileList.value = []
}

const handleFileSuccess: UploadProps['onSuccess'] = (
    response
) => {
    if (file.value) {
        file.value += ',' + response.data.url;
    } else {
        file.value = response.data.url;
    }
}

const handleRemoveFile: UploadProps['onRemove'] = (
    response
) => {
    let fileList = file.value.split(',');
    fileList.splice(fileList.indexOf(response.url), 1);
    file.value = fileList.join(',');
}

function handleAdd(){
    // return console.log(file.value)
    if (file.value == '') {
        ElMessage.error('请上传文件')
        return
    }
    AddSupplement({
        id: supplementId.value,
        handle_file: file.value
    }).then(res => {
        ElMessage.success('上传成功')
        dialogVisible.value = false
        file.value = ''
    })
}
</script>
<style lang="scss" scoped>
.wrap {
    padding: 20px;
    width: 100%;

    .card-header {

        span {
            font-size: 16px;
        }
    }

    .filter {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        dt {
            font-size: 16px;
        }

        dd {
            margin-right: 30px;
        }
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    .upload {
        width: 300px;
        margin: 0 auto;

        :deep(.el-upload-dragger) {
            width: 100%;
            height: 100%;
        }

        :deep(.el-upload) {
            width: 100%;
            height: 100%;
        }
    }
}
</style>